let clickOutsideFn = '' // 定义一个全局的变量
// 导入时间格式插件
import moment from 'moment'
// 封装全局自定义指令的组件
export default {
  errorimg: {
    // 这个生命周期值执行一次，要是后面更新有其他问题也需要解决
    // 如果图片img没有src，它是不会报错的  也要给它默认的图片
    inserted(dom, obj) {
      // 当你的图片有src，就使用你的src，没有就使用默认图片
      // 如果图片加载有问题，就指定头像
      dom.src =
        dom.src || obj.vue || require('@/assets/common/bigUserHeader.png')
      // 图片出错了，这是一个监听函数，执行一次后回一直存在
      dom.onerror = () => {
        // 图片加载出错会执行
        // 如果出错了，就给他一个默认图片
        dom.src = obj.value || require('@/assets/common/bigUserHeader.png')
      }
    },
    // 当指令所在组件有更新且更新完成后执行
    componentUpdated(dom, obj) {
      dom.src =
        dom.src || obj.value || require('@/assets/common/bigUserHeader.png')
    }
  },

  // 作用：点击某个dom区域外作出一些事件处理
  clickOutside: {
    // 渲染时执行
    inserted(dom, obj) {
      // 给全局变量赋值一个方法
      clickOutsideFn = (e) => {
        // 点击当前指令所在dom区域外才执行相应方法
        // 当前点击的dom是否属于指令所在dom内
        // 指令所在dom包含点击的dom  contains
        // console.log('clickOutside')
        // e.target就是当前点击的dom
        // 判断,当当前点击的dom不在绑定事件的dom内时执行传递过来的方法
        if (!dom.contains(e.target)) {
          obj.value()
        }
      }
      // 给dom树绑定点击事件
      document.addEventListener('click', clickOutsideFn)
    },
    // 销毁前执行
    unbind() {
      // 销毁dom树绑定的点击事件
      document.removeEventListener('click', clickOutsideFn)
    }
  },

  // 转换时间格式
  formatTime: {
    inserted(dom, obj) {
      dom.innerHTML = moment(obj.value).format('YYYY-MM-DD')
    },
    // 更新时调用
    componentUpdated(dom, obj) {
      dom.innerHTML = moment(obj.value).format('YYYY-MM-DD')
    }
  }
}
